<template>
  <div>
    <!-- 面包屑导航 -->
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/' }">订单</el-breadcrumb-item>
      <el-breadcrumb-item>修改商品信息</el-breadcrumb-item>
    </el-breadcrumb>

    <!-- 卡片视图 -->
    <el-card>
      <!-- 表格数据3 -->
      <el-row style="margin-top:20px">
        <el-col>
          <p style="margin-left: 20px;"><span class="el-icon-s-management">商品信息</span></p>
          <el-table :data="tableData" border style="width: 90%;margin-left: 60px;">
             <el-table-column prop="image" label="商品图片" width="130" >
                <template slot-scope="scope">
                  <img :src="scope.row.image" width="90" height="100">
                </template>
              </el-table-column>
              <el-table-column prop="name" label="商品名称"></el-table-column>
              <el-table-column prop="snPrice" label="价格/货号" width="100"></el-table-column>
              <el-table-column prop="attribute" label="属性" width="140"></el-table-column>
              <el-table-column label="数量">
                <template slot-scope="scope">
                  <input v-model="scope.row.num">
                </template>
              </el-table-column>
              <el-table-column prop="knum" label="库存" width="140"></el-table-column>
              <el-table-column prop="money" label="小计" width="220"></el-table-column>
          </el-table>
        </el-col>
      </el-row>      
    </el-card>

    <!-- 卡片视图2 -->
    <el-card style="margin-top:40px">
      <!-- 查询表单开始 -->
      <el-form ref="order" :model="orderDetailsForm" label-width="80px">
        <el-form-item label="搜索商品:" label-width="150px">
          <el-input v-model="searchMap.name" style="width:150px"></el-input>
          <el-button type="primary" style="margin-left:20px" @click="search">搜索</el-button>
          <el-select v-model="orderDetailsForm.skuId" @change="change1" placeholder="选择商品" size="small" style="margin-left:20px">
              <el-option
                v-for="item in skus"
                :key="item.id"
                :label="item.name"
                :value="item.spuId">
              </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="商品名称:" label-width="150px">
          <el-input v-model="spu.name" :disabled="true"></el-input>
        </el-form-item>
        <el-form-item label="货号:" label-width="150px">
          <el-input :value="spu.sn === '0'?'待处理':''" :disabled="true"></el-input>
        </el-form-item>
        <el-form-item label="分类:" label-width="150px">
          <el-input v-model="orderDetailsForm.order_id" :disabled="true"></el-input>
        </el-form-item>
        <el-form-item label="品牌:" label-width="150px">
          <el-input v-model="orderDetailsForm.apply_time" :disabled="true"></el-input>
        </el-form-item>
        <el-form-item label="价格:" label-width="150px">
          <el-input v-model="orderDetailsForm.apply_time" :disabled="true"></el-input>
        </el-form-item>
        <el-form-item label="属性:" label-width="150px">
          <el-input v-model="orderDetailsForm.apply_time" :disabled="true"></el-input>
        </el-form-item>
        <el-form-item label="库存:" label-width="150px">
          <el-input v-model="orderDetailsForm.apply_time" :disabled="true"></el-input>
        </el-form-item>
        <el-form-item label="数量:" label-width="150px">
          <el-input v-model="orderDetailsForm.apply_time" :disabled="true"></el-input>
        </el-form-item>
        <el-form-item label="操作:" label-width="150px">
          <el-input v-model="orderDetailsForm.apply_time" :disabled="true"></el-input>
        </el-form-item>
      </el-form>
    </el-card>

  </div>
</template>

<script>

export default {
  async created () {
    this.orderId = this.$route.query.orderId
    this.getOrderList()
  },
  data () {
    return {
      orderId: 0,
      tableData: [], //表格数据
      orderInfomation: {
        num: 0
      },
      orderDetailsForm:{},
      searchMap: {},
      skus: [], //下拉列表
      spu: {}
    }
  },
  methods: {
    async getOrderList(){
      const { data: res } = await this.$http.get(`/orders/order/lookOrderDetails?id=${this.orderId}`)
      this.tableData = res.data.orderItems
      this.orderInfomation.num = res.data.orderItems.num
    },
    async search(){ //搜索商品
      this.skus = []
      const { data: res } = await this.$http.post(`/goods/sku/searchGoodsByGoodname?name=${this.searchMap.name}`)
      if( res.code !== 200 ){
        return this.$message.error("搜索失败");
      }
      this.$message.success("查询成功");
      this.skus = res.data
    },
    async change1(){//商品改变事件
      const { data: res } = await this.$http.get(`/goods/spu/findById/${this.orderDetailsForm.skuId}`)
      this.spu = res.data.spu
      console.log(this.spu);
    }
  }
}
</script>

<style scoped>

</style>>
